/**
 * create by young (young2f@outlook.com) on 2020/9/12
 * 订单统计
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {DatePicker, Drawer, Form, Select, Table} from 'antd';
import styles from '../index.less';

import ViewTitle from '../../components/ViewTitle';
import FormBase from '../../components/Base/FormBase';
import notify from "../../components/NotificationExtra";
import {FormField, SearchForm} from 'antd-extra';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ModalSalesOrderDetail from "./modal/ModalSalesOrderDetail";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');
const {Option} = Select;
const table = 'SalesOrder';
const title = '订单';

@Form.create()
@connect(({user, global, sales, store}) => ({...user, ...global, ...sales, ...store}))
export default class Assess extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });

    this.props.dispatch({
      type: 'sales/findStatisticsMany',
      payload
    });
  }

  getTableCols = () => {
    const temp = [];
    temp.push(
      {
        title: '销售单位',
        dataIndex: 'division',
        key: 'division'

      },
      {
        title: '客户名称',
        dataIndex: 'customer',
        key: 'customer'

      },
      {
        title: '合同金额',
        dataIndex: 'amount',
        key: 'amount'

      },
      {
        title: '发货金额',
        dataIndex: 'outboundAmount',
        key: 'outboundAmount'

      },
      {
        title: '开票金额',
        dataIndex: 'invoiceAmount',
        key: 'invoiceAmount'

      },
      {
        title: '收款金额',
        dataIndex: 'receiptAmount',
        key: 'receiptAmount'
      },
      {
        title: '合同未收款',
        dataIndex: 'a',
        key: 'a', render: (text, record) => {
          const {amount = 0, receiptAmount = 0} = record;
          const temp = amount - receiptAmount;
          const color = temp > 0 ? "red" : "green";
          return <div style={{color}}>{temp}</div>;
        }
      },
      {
        title: '发货未收款',
        dataIndex: 'b',
        key: 'b', render: (text, record) => {
          const {receiptAmount = 0, outboundAmount = 0} = record;
          const temp = outboundAmount - receiptAmount;
          const color = temp > 0 ? "red" : "green";
          return <div style={{color}}>{temp}</div>;
        }
      },
      {
        title: '开票未收款',
        dataIndex: 'b',
        key: 'b', render: (text, record) => {
          const {receiptAmount = 0, invoiceAmount = 0} = record;
          const temp = invoiceAmount - receiptAmount;
          const color = temp > 0 ? "red" : "green";
          return <div style={{color}}>{temp}</div>;
        }
      }
      // {
      //   title: '操作', dataIndex: 'operation', key: 'operation',
      //   width: 120, fixed: 'right',
      //   render: (value, record) => {
      //     return (
      //       <span>
      //      {<a style={{marginRight: '6px'}}
      //       //   onClick={() => this.setState({showDetail: true, record})}
      //
      //      >详情</a>}
      //
      //       </span>
      //     );
      //   }
      // }
    );
    return temp;

  };
  getSearchFields = () => {
    const model = this.props[`${table}Model`];
    if (!model) return [];
    const arr = [];
    this.getSearchField(arr, model, "");
    const {prods} = model;
    this.getSearchField(arr, prods, "prods.");
    const {materials} = prods;
    this.getSearchField(arr, materials, "prods.materials.");
    arr.push(<FormField
      label={"是否开票"}
      name={"isKP"}
      key={"isKP"}
    >
      <Select allowClear>{[<Option value={"已开票"}>{"已开票"}</Option>,
        <Option value={"未开票"}>{"未开票"}</Option>]}</Select>
    </FormField>);
    return arr;
  };

  render() {
    const {result = [], _notify, form} = this.props;
    const {showDetail, record} = this.state;
    if (_notify) {
      notify(_notify);
    }
    console.log('statisticss', result);
    return (
      <Form className={styles.content}>
        <ViewTitle
          title={"客户统计列表"}
          level={1}

        ></ViewTitle>
        <SearchForm
          style={{marginLeft: '6px', marginRight: '6px'}}
          onSearch={() => {
            this.state.current = 1;
            this.componentDidMount();
          }}
          onReset={this.handleReset}
          cols={3}
          min={6}
          expandText="展开"
          form={form}
        >
          {this.getSearchFields()}
        </SearchForm>

        <Table
          className={styles.antTable}
          bordered={true}
          columns={this.getTableCols()}
          dataSource={result}
          scroll={{x: true}}
          pagination={true}
          //  scroll={{ x: 1300 }}
        ></Table>

        {showDetail && <Drawer
          visible={showDetail}
          title={`${title}详情`}
          placement="left"
          width={'80%'}
          style={{padding: 0}}
          onClose={() => {
            this.setState({showDetail: false});
            this.componentDidMount();
          }}
        >
          <ModalSalesOrderDetail
            values={record}
            isReview={true}
          > </ModalSalesOrderDetail>
        </Drawer>}
      </Form>
    );
  }
}
